<template>
    <div id="pages">
        <div class="page1 page">
            <div class="title part">
                <h1>{{ page1.title }}</h1>
            </div>
            <div class="times">
                <span>{{ page1.times[0] }}</span>
                <span>-</span>
                <span>{{ page1.times[1] }}</span>
            </div>
            <div class="table">
                <table>
                    <tbody>
                        <tr>
                            <td>项目名称</td>
                            <td>{{ page1.project_name }}</td>
                        </tr>
                        <tr>
                            <td>报告编制</td>
                            <td>{{ page1.reporter }}</td>
                        </tr>
                        <tr>
                            <td>报告审核</td>
                            <td>{{ page1.examine }}</td>
                        </tr>
                        <tr>
                            <td>报告批准</td>
                            <td>{{ page1.permiss }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="company">{{ page1.company }}</div>
            <div class="maketime">{{ page1.create_time }}</div>
        </div>
        <div class="page2 page">
            <div class="title part">{{ page2.title }}</div>
            <div class="content part" v-html="page2.content"></div>
        </div>
        <div class="page3 page" v-for="item in page3s" :key="item">
            <div class="title part">
                <h2>{{ item.title }}</h2>
            </div>
            <div class="table part">
                <table>
                    <thead>
                        <tr>
                            <th>设备名称</th>
                            <th>状态</th>
                            <th>诊断结论</th>
                            <th>维护建议</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="i in item.list">
                            <td>{{ i.device_name }}</td>
                            <td>{{ i.status }}</td>
                            <td>{{ i.result }}</td>
                            <td>{{ i.suggest }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="page3 page4 page" v-for="item in page4s" :key="item">

            <div class="title part">
                <h2>{{ item.title }}</h2>
            </div>
            <div class="table part">
                <table>
                    <thead>
                        <tr>
                            <th>设备名称</th>
                            <th>测点名称</th>
                            <th>振动状态</th>
                        </tr>
                    </thead>
                    <tbody v-for="i in item.list">
                        <tr>
                            <td>{{ i.device_name }}</td>
                            <td>{{ i.sensor_name }}</td>
                            <td>{{ i.status }}</td>
                        </tr>
                        <tr rowspan="3">
                            <td colspan="3" :ref="i.number" :data="i.data"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import html2pdf from 'html2pdf.js'
import { chartOptions, transformData } from './config'
import { requestApi } from '@/requset/api'
export default {
    data() {
        return {
            page1: {},
            page2: {},
            page3s: [],
            page4s: [],
            filename: null
        }
    },
    methods: {

        draw(refname, processedData) {
            let options = chartOptions("datetime")
            let ref = this.$refs[refname][0]
            this.$nextTick(() => {
                let seriesData = []
                let { acc_rms, vel_rms } = processedData
                if (acc_rms) {
                    var acc_rmsData = []
                    acc_rms.forEach(e => {
                        let { id, value } = e
                        acc_rmsData.push([id, value])
                    })
                    seriesData.push({
                        name: "加速度",
                        data: acc_rmsData,
                        color: "yellow", // 设置颜色为黄色
                    })
                }
                if (vel_rms) {
                    var vel_rmsData = []
                    acc_rms.forEach(e => {
                        let { id, value } = e
                        vel_rmsData.push([id, value])
                    })
                    seriesData.push({
                        name: "加速度",
                        data: vel_rmsData,
                        color: "yellow", // 设置颜色为黄色
                    })
                }

                options.series = seriesData
            })
        },
        initPdf() {
            let { device_ids, times } = this.$route.query
            times = JSON.parse(times)
            times.map(e => this.dayjs(e).format('YYYY-MM-DD HH:mm:ss'))
            return requestApi(
                'post',
                'report/down/sys', {
                device_ids,
                times
            },
                true,
            ).then((res) => {
                if (res.data.code == 0) {
                    let { page1, page2, page3s, page4s, filename } = res.data
                    this.page1 = page1
                    this.page2 = page2
                    this.page3s = page3s
                    this.page4s = page4s
                    this.filename = filename
                }
            })
                .then(() => {
                    this.page4s.forEach((e1) => {
                        let { list } = e1
                        list.forEach((e2) => {
                            let { data, number } = e2
                            let dataF = transformData(data)
                            this.draw(number, dataF)
                        })
                    })
                })
                // .then(() => {
                //     setTimeout(() => {
                //         this.exportPDF(this.filename)
                //     })
                // }, 500)
        },
    },
    mounted() {
        this.initPdf()
    },
}
</script>

<style lang="less" scoped>
#pages {
    background-color: white;
    width: 806px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;

    .page {
        width: 100%;
        height: 1120px;
        position: relative;

        .logo {
            position: absolute;
            right: 16px;
            top: 12px;
            height: 32px;
        }

        .title_ {
            position: absolute !important;
            top: 11px;
            left: 14px !important;
            font-size: 14px;
        }

        .table {
            position: absolute;
            width: 60%;
            top: 66%;
            left: 20%;

            table {
                border-collapse: collapse;
                /* 合并边框 */
                width: 100%;
            }

            /* 表头样式 */
            th {
                border: 1px solid black;
                /* 边框样式 */
                padding: 8px;
                text-align: center;
            }

            /* 单元格样式 */
            td {
                border: 1px solid black;
                /* 边框样式 */
                padding: 8px;
                text-align: center;
                height: 36px;
                vertical-align: middle;
            }
        }
    }

    .page1 {
        .title {
            position: absolute;
            width: 100%;
            top: 26%;
            left: 0%;
            text-align: center;
            font-weight: bolder;
            font-size: 38px;
        }

        .times {
            position: absolute;
            width: 100%;
            top: 56%;
            left: 0%;
            text-align: center;
            font-size: 18px;
            font-weight: 550;
        }

        .company {
            position: absolute;
            width: 100%;
            top: 90%;
            left: 0%;
            text-align: center;
        }

        .maketime {
            position: absolute;
            width: 100%;
            top: 93%;
            left: 0%;
            text-align: center;
        }

        td:nth-child(1) {
            width: 30%;
        }

        td:nth-child(2) {
            width: 70%;
        }
    }

    .page2 {
        .part {
            position: absolute;
            width: 100%;
            left: 0;
        }

        .title {
            font-size: 20px;
            text-align: center;
            top: 76px;
        }

        .content {
            //   background-color: rgb(250 235 215);
            width: 80%;
            left: 10%;
            height: 300px;
            top: 138px;

            p {
                line-height: 1.8;
                margin-bottom: 20px;
            }
        }
    }

    .page3 {
        .part {
            position: absolute;
            width: 100%;
            left: 0;
        }

        .title {
            width: 100%;
            text-align: left;
            top: 64px;
            font-size: 24px;
            font-weight: 500;
        }

        .title_s {
            top: 140px;
            left: 10%;
            font-size: 19px;
            font-weight: 500;
        }

        .table {
            width: 80%;
            left: 10%;
            top: 170px;

            td:nth-child(1) {
                width: 18%;
            }

            td:nth-child(2) {
                width: 10%;
            }

            td:nth-child(3) {
                width: 40%;
                text-align: left;
            }

            td:nth-child(3) {
                width: 40%;
                text-align: left;
            }
        }
    }

    .page4 {
        .table {
            width: 80%;
            left: 10%;
            top: 170px;

            td:nth-child(1) {
                width: 40%;
            }

            td:nth-child(2) {
                width: 40%;
            }

            td:nth-child(3) {
                width: 20%;
                text-align: center;
            }

            tbody {
                tr:nth-child(even) {
                    height: 200px;
                }
            }
        }
    }
}
</style>
